<div class = "pages-container" style = "height:100%;">
    <style>
        .pages-container .raised.segment .label:hover {
            background: #db2828;
            color: #fff;
        }
    </style>
    <page-classify></page-classify>
    <div class = "perW85" style = "margin:0px auto;padding:0px 50px;">
        <div class = "mb10 clearfix w pt20">
            <i class = "reply icon fl" style = "font-size:22px;" ng-hide = "folders_shown" ng-click = "back()"></i>
            <a class = "fr ml10 cp" ng-show = "folders_shown" style = "margin-top:3px;" ng-click = "newFolder()">新建文件夹</a>

            <div class = "ui small icon input fr">
                <input type = "text" placeholder = "搜索页面名称或作者" class = "" ng-model = "query.text">
                <i class = "search icon"></i>
            </div>
        </div>
        <div class = "clearfix" style = "clear: right;">
            <div class = "ui {{isSuperScreen() ? 'five' : 'four'}} column grid">
                <div class = "column" ng-click = "new_page()">
                    <div class = "ui raised segment pr page-item">
                        <a class = "ui red ribbon label">新建页面</a>
                        <div style = "height: 100px;" class = "mt30 f16 tc">
                            <b style = "font-size: 30px;" class = "cp">+</b>
                        </div>
                    </div>
                </div>
                <!--文件夹列表-->
                <div class = "column page folder" ng-repeat = "folder in folders" ng-click = "intoFolder($index)" ng-show = "folders_shown">
                    <div class = "ui raised segment pr page-item">
                        <a class = "ui red ribbon label">文件夹</a>
                        <div style = "height: 100px;" class = "mt30 f16 tc">
                            <i class = "folder icon"></i>
                            <b>{{folder.name}}</b>
                        </div>
                        <div style = "position: absolute;bottom: 10px;right: 5px;" class = "cp ui horizontal label" ng-click = "editFolder($event,$index)">
                            编辑
                        </div>
                        <i ng-class = "{empty:!page.focused,star:true,icon:true}" style = "position:absolute;right:5px;top:10px;color:#fb2828;" title = "点击重点关注"></i>
                    </div>
                </div>
                <!--文件列表-->
                <div class = "column page" ng-repeat = "page in pages" ng-show = "page.shown" ng-mouseover = "select($index)" id = "{{page.pageId}}" ng-click = "toProd($event,page.pageId,page.tbId,page.tableType,page.sharerName)">
                    <div class = "ui raised segment pr page-item">
                        <a class = "ui red ribbon label">{{page.sharerName}}</a>
                        <div style = "height: 100px;" class = "mt30 f16 tc">
                            <!--<i class = "folder open icon"></i>-->
                            <b>{{page.pageName}}</b>
                        </div>
                        <div style = "position: absolute;bottom: 10px;right: 5px;" class = "cp ui horizontal label" ng-show = "userName == page.sharerName" ng-click = "toEditor($event,page.pageId,page.tbId,page.tableType,page.sharerName)">
                            编辑
                        </div>
                        <i ng-class = "{empty:!page.focused,star:true,icon:true}" style = "position:absolute;right:5px;top:10px;color:#fb2828;" title = "点击重点关注"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>